import React, {useEffect, useState} from 'react';
import {Breadcrumb, Button, Col, Form, Input, Layout, message, Popconfirm, Row, Space, Modal} from "antd";
import {useNavigate} from "react-router-dom";
import {Content} from "antd/es/layout/layout";
import Mytable from "../../../pages/Mytable";
import {getSystemsByPage, deleteSystemById, addSystem,getSystemById,modifySystemById} from '../../../api/system'

function System() {
    const navigate = useNavigate()
    const [form] = Form.useForm();
    const [systemForm] = Form.useForm();
    const [total, setTotal] = useState(0);
    const [data, setData] = useState([]);
    const [page, setPage] = useState({
        "current": 1,
        "pageSize": 10
    })
    const [loading, setLoading] = useState(false);
    const [edit, setEdit] = useState(false);
    const [system, setSystem] = useState({
        "leader": '',
        "system_name": '',
        "system_type": '',
    })
    const [isModalVisible, setIsModalVisible] = useState(false);
    const pagination = {
        onShowSizeChange: (current, pageSize) => {
            paginationChange(current, pageSize)
        },
        onChange: (current, pageSize) => {
            paginationChange(current, pageSize)
        },
        showSizeChanger: true,
        total,
        current: page.current,
        pageSize: page.pageSize,
        defaultPageSize: 10,
        pageSizeOptions:
            [5, 10, 15, 20]
    }
    const paginationChange = async (current, pageSize) => {
        setPage({
            pageSize,
            current
        })
    }

    useEffect(() => {
        setLoading(true)
        getSystemsByPage({...page, ...system}).then(response => {
            const {records, total} = response.data.data
            setTotal(total)
            setData(records)
            setLoading(false)
        })
    }, [page,system]);

    const columns = [
        {
            title: '系统名称',
            width: '50vh',
            dataIndex: 'system_name',
        },
        {
            title: '系统类型',
            dataIndex: 'system_type',
        },
        {
            title: '项目经理',
            dataIndex: 'leader',
        },
        {
            title: '操作',
            dataIndex: 'repayment',
            render: (_, record) => (<Space>
                <Button type='primary' onClick={async () => {
                    const {data:res} = await getSystemById(record.id)
                    systemForm.setFieldsValue(res.data)
                    setEdit(true)
                    setIsModalVisible(true)
                }}>编辑</Button>
                <Button type='primary' onClick={() => {
                    navigate(`/main/environment/${record.id}`)
                }}>环境管理</Button>
                <Popconfirm title="确认删除？" okText="确认" cancelText="取消" onConfirm={() => {
                    deleteSystemById(record.id).then(response => {
                        const res = response.data
                        message.success(res.msg)
                        setPage({current: 1, pageSize: page.pageSize})
                    })
                }
                }>
                    <Button type='danger'>删除</Button></Popconfirm>
            </Space>)
        }
    ];
    return (
        <Layout style={{padding: '0 24px 24px'}}>
            <Breadcrumb style={{margin: '16px 0'}}>
                <Breadcrumb.Item onClick={() => navigate("/main")}>首頁</Breadcrumb.Item>
                <Breadcrumb.Item>系统编辑</Breadcrumb.Item>
            </Breadcrumb>
            <Content
                className="site-layout-background"
                style={{
                    padding: 24,
                    margin: 0,
                    minHeight: 280,
                }}
            >
                <Form
                    name="basic"
                    autoComplete="off"
                    form={form}
                    style={{
                        marginBottom: '10px'
                    }}
                    onFinish={(values) => {
                        setSystem({...values})
                        setPage({current: 1, pageSize: page.pageSize})
                    }}
                >
                    <Row gutter={24}>
                        <Col span={8}><Form.Item
                            label="系统类型"
                            name='system_type'
                        >
                            <Input/>
                        </Form.Item></Col>

                        <Col span={8}>
                            <Form.Item
                                label="系统名称"
                                name='system_name'
                            >
                                <Input/>
                            </Form.Item></Col>

                        <Col span={8}><Form.Item
                            label="项目经理"
                            name='leader'
                        >
                            <Input/>
                        </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col
                            span={24}
                            style={{
                                textAlign: 'right',
                            }}
                        >
                            <Space>
                                <Button type="primary" onClick={() => {
                                    setIsModalVisible(true)
                                }}>
                                    添加系统
                                </Button>
                                <Button type="primary" htmlType="submit">
                                    查询
                                </Button>
                                <Button
                                    onClick={async () => {
                                        form.resetFields();
                                        const formValue = await form.validateFields()
                                        setSystem({...system, ...formValue})
                                        setPage({...page,current: 1})
                                    }}
                                >
                                    重置
                                </Button></Space>
                        </Col>
                    </Row>
                </Form>
                <Mytable
                    columns={columns}
                    dataSource={data}
                    pagination={pagination}
                    bordered
                    loading={loading}
                />
                <Modal title={edit ? '编辑系统' : '添加系统'} visible={isModalVisible} closable={false} footer={null}>
                    <Form
                        name="basic"
                        autoComplete="off"
                        layout={'vertical'}
                        form={systemForm}
                        onFinish={async (values) => {
                            if (edit) {
                                const {data:res} = await modifySystemById(values)
                                message.success(res.msg)
                            } else {
                                const {data: res} = await addSystem(values)
                                message.success(res.msg)
                            }
                            setIsModalVisible(false)
                            setEdit(false)
                            systemForm.resetFields()
                            setPage({...page})
                        }}
                    >
                        <Form.Item
                            label="id"
                            name="id"
                            style={{display:'none'}}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="系统名"
                            name="system_name"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入系统名',
                                },
                            ]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="项目经理"
                            name="leader"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入项目经理',
                                },
                            ]}
                        >
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            label="项目类型"
                            name="system_type"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入项目类型',
                                },
                            ]}
                        >
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        ><Space>
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                            <Button type="default" onClick={async () => {
                                setIsModalVisible(false)
                                systemForm.resetFields()
                                setEdit(false)
                            }}>
                                取消
                            </Button>
                        </Space>
                        </Form.Item>
                    </Form>
                </Modal>
            </Content>
        </Layout>
    );
}

export default System;